<template>
  <div class="asset-discovery-item">
    <div class="left">在栏率：100%</div>
    <div class="asset-discovery-item-center"></div>
    <div class="right">
      <!-- 总数、在栏、离栏、日期、混入 -->
      <div class="discovery-date">最近盘点：2021/4/8</div>
      <div class="discovery-content">
        <span>总数：5000</span><br/>
        <span>在栏数：5000</span><br/>
        <span>离栏数：0</span><br/>
        <span>混入数：0</span>
      </div>
      <div class="xiangqing">详情</div>
      </div>
  </div>
</template>
<script>
export default {
  name: "AssetDiscoveryItem",
  data () {
    return {
      option: {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '10%',
          left: '20%'
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            center:['45%','55%'],
            data: [
              {
                name:'在栏数',
                value:73,
                itemStyle:{
                  color: {
                      type: 'linear',
                      x: 0,
                      y: 1,
                      x2: 0,
                      y2: 0,
                      colorStops: [{
                          offset: 0, color: '#356eff' // 0% 处的颜色
                      }, {
                          offset: 1, color: '#9bfcaf' // 100% 处的颜色
                      }],
                      global: false // 缺省为 false
                  },
                },
                label:{
                  show:true,  //单独显示该数据项
                  formatter:'{d}%'
                }
              },
              {
                name:'离栏数',
                value:27,
                itemStyle:{
                  color: '#ccc',
                },
                label:{
                  emphasis:{
                    show:false
                  }
                }
              }
            ],
            itemStyle: {
                normal: {
                },
            },
            label:{
              normal:{//默认不显示数据
                show : false,
                position:'center',
                fontSize: '40',
                fontWeight: 'bold'
              },
              color:'#fff',
            },

          }
        ]
      }
    };
  },
  mounted() {
    this.$nextTick(()=>{
      for(let i = 0; i < document.getElementsByClassName("asset-discovery-item-center").length; i++){
        this.$echarts.init(document.getElementsByClassName("asset-discovery-item-center")[i]).setOption(this.option)
      }
    })
  },
}
</script>
<style lang="less" scoped>
  .asset-discovery-item{
    display: flex;
    justify-content: flex-start;
    width: 100%;
    height: 300px;
    .left {
      flex: 1;
      text-align: center;
      font-size: 16px;
      padding-top: 25px;
    }
    .asset-discovery-item-center {
      width: 50%;
      height: 300px;
    }
    .right {
      flex: 1;
      flex-grow: 1.5;
      padding-top: 26px;
      .discovery-date {
        font-size: 14px;
        font-weight: 600;
        padding-bottom: 20px;
        text-align: center;
      }
      .discovery-content{
        width: 80%;
        border: 2px solid rgb(194, 193, 193);
        border-radius: 5px;
        padding: 5px 20px;
        margin: auto;
        position: relative;
      }
      .xiangqing {
        position: absolute;
        right: 50px;
        bottom: 50px;
      }
    }
  }
</style>